<template>
  <view>
    <view v-if='list.length && hasLoaded' class="item" v-for="(item,i) in list" :key="i" @click="onClick(item)">
      <uni-card :title="item.month">
        <view>评价: {{item.evaluate}}</view>
        <view v-if='item.remark'>评价备注: {{item.remark}}</view>
      </uni-card>
    </view>
    <view v-if="!list.length && hasLoaded">
      <empty />
    </view>
    <uni-load-more v-if='list.length >= this.form.pageSize' :status="loadStatus" />
  </view>
</template>

<script>
  import empty from '../../components/empty.vue'
import { getCommentList } from '../../utils/api'
  export default {
    components: {
      empty
    },
    data() {
      return {
        loadStatus: 'more',
        hasLoaded: false,
        form: {
          page: 1,
          pageSize: 10,
        },
        list: [],
      }
    },
    onLoad() {
      this.getList()
    },
    onPullDownRefresh() {
      this.form.page = 1
      this.getList()
    },
    onReachBottom() {
      console.log('onReachBottom')
      if (this.loadStatus === 'noMore') {
        return 
      }
      this.form.page += 1
      this.getList()
    },
    methods: {
      async getList() {
        this.loadStatus = 'loading'
        const res = await getCommentList(this.form)
        this.total = res.dataCount
        if (this.form.page === 1) {
          this.list = res
        } else {
          this.list.push(...res)
        }
        uni.stopPullDownRefresh()
        
        if (this.total < this.form.pageSize) {
          this.loadStatus = 'noMore'
        } else
        if (this.list.length >= this.total) {
          this.loadStatus = 'noMore'
        } else {
          this.loadStatus = 'more'
        }
        this.hasLoaded = true
      }
    }
  }
</script>

<style>

</style>